<template>
    <s-layout :onShareAppMessage="state.shareInfo" title="活动分享" :bgStyle="{ color: '#f2f2f2' }">
        <view class="container">
            <view class="banner">
                <!-- 砍价活动的banner图片或文字 -->
                <image :src="state.imageUrl" mode="aspectFill"></image>
            </view>
            <view class="user-info">
                <view class="user-info-box">
                    <image class="user-info-img" :src="state.curAvatar" mode="aspectFill"></image>
                    <view class="user-info-name text-chaochu">{{ state.curNickName }}</view>
                </view>
                <view class="banner banner-day" v-if="state.is_repeat == '2'">
                    活动剩余时间: {{ state.diffdays || 0 }}天
                </view>
            </view>

            <view class="hr"></view>
            <view class="zan-list">
                <view class="zan-list-box">
                    <view class="user-info-box" v-for="(item, index) in state.items" :key="index">
                        <image class="user-info-img" :src="item.avatar" mode="aspectFill"></image>
                        <view class="user-info-name text-chaochu">{{ item.nickname }}</view>
                    </view>
                </view>

                <!-- <view>
                    <image class="content-box-time-img" :src="state.curAvatar" mode="aspectFill"></image>
                    <view class="list-name">{{ state.curNickName }}</view>
                </view> -->
                
                <button class="mini-btn" type="primary" size="mini" 
				v-if="state.isMember && (state.diffdays > 0  || state.is_repeat=='1') && state.is_show == '2'" 
				open-type="share" style="background-color:#FFCCCC">我要分享</button>

            </view>


            <view class="button-container">
                <!-- <button v-if="state.isMember" bindtap="砍价" @click="addinvitelog()">点赞</button> -->

                <!-- <button v-if="state.isMember && state.diffdays > 0" open-type="share" class="contentShare">我要分享</button> -->

            </view>

   <!--         <view class="price-container">
                <view v-for="(item, index) in state.items" :key="index">
                    <image :src="item.avatar" mode="aspectFill"></image>
                    <view>
                        <view class="list-name">{{ item.nickname }}</view>
                    </view>
                </view>
            </view> -->
            <view class="text">
                <uni-collapse>
                    <uni-collapse-item title="活动详情">
                        <view class="collapse-box2" v-html="state.detail.content"></view>
                    </uni-collapse-item>
                </uni-collapse>
            </view>

            <view class="text">
                <!-- <rich-text :nodes="state.detail.content"></rich-text> -->
                <uni-collapse>
                    <uni-collapse-item title="参与城市">
                        <view class="collapse-box2">
                            <text class="city-name" v-for="(item,i) in state.city" :key="i">{{item}}</text>
                        </view>
                    </uni-collapse-item>
                </uni-collapse>
            </view>
        </view>
    </s-layout>
</template>

<script setup>
import {
    baseUrl
} from '@/sheep/config';
import sheep from '@/sheep';
import {
    onLoad,
    onShow,
    onReachBottom
} from '@dcloudio/uni-app';
import {
    computed,
    reactive,
    ref
} from 'vue';
import _ from 'lodash';
import data from '@/sheep/api/data';
const state = reactive({
    data: {},
    selected: [], // 用于绑定选中的checkbox值
    loadStatus: '',
    total: 1,
    items: [],
    submit_btn: false,
    progressPercent: 50,
    detail: {},
    shareuserid: 0,
    shareeventid: 0,
    curuserid: 0,
    imageUrl: '',
    shareInfo: {},
    diffdays: 0,
    isMember: false,
    curNickName: '',
    curAvatar: '',
    city:[],
    is_repeat: "1",
	  is_show: "2",
	  is_city:'1',
    zan_list: [{
        name: "1685461698", img: ""
    }, {
        name: "164534534", img: ""
    }, {
        name: "dh sdrth", img: ""
    }]
});
const imageUrl = ref('')
const url = baseUrl.slice(0, baseUrl.lastIndexOf("index.php"))
async function getData(eventid) {
    let {
        code,
        data
    } = await sheep.$api.game.sharedetail(eventid);
    if (code) {
		console.log(data.sharelist)
		 state.is_city= data.detail.is_city
        state.curuserid = data.curuserid
        state.items = data.sharelist
        state.detail = data.detail
        state.isMember = data.isMember
        state.diffdays = data.diffdays
        state.curNickName = data.curNickName
        state.curAvatar = data.curAvatar
        state.city = data.cityTxt
        state.is_repeat = data.detail.is_repeat
		state.is_show = data.detail.is_show
        if (state.data.shareuserid == 0 || state.data.shareuserid == undefined) {
            state.data.shareuserid = state.curuserid;
        }
        state.imageUrl = url + state.detail.image
        // console.log(state.detail);
    }
}
async function addinvitelog() {
    // console.log('state.data.shareuserid'+state.data.shareuserid);
    await sheep.$api.game.addinvitelog(state.data.shareuserid, state.data.shareeventid);
    //await sheep.$api.game.addinvitelog(4, 7);

}
onLoad(async (option) => {
    state.data = option;
    state.data.shareuserid = option.shareuserid
    state.data.shareeventid = option.shareeventid
    if (option.eventid == undefined) {
        option.eventid = option.shareeventid;
    }
    if (option.shareeventid == undefined) {
        option.shareeventid = option.eventid;
    }

    await getData(option.eventid);
    // getLocation()
    state.shareInfo = {
        title: state.detail.name,
        desc: state.detail.name,
        path: '/pages/Checkin/sharedetail?shareuserid=' + state.data.shareuserid + '&shareeventid=' + state.data.shareeventid,
        imageUrl: state.detail.image
    }
    uni.$mpShare = state.shareInfo

});
onShow(() => {




})

</script>

<style scoped>
	
.zan-list.data-v-23350a03 {
	width: 90%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
	
	
.hr {
    width: 80%;
    height: 1rpx;
    background-color: #ccc;
    margin-bottom: 10rpx;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.banner {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 30rpx;
    /*text-align: right;
    width: 100%;
    flex-grow: 1;*/
}

.banner-day {
    padding-right: 30rpx;
}

.banner>image {
    width: 690rpx;
    height: 300rpx
}

.text {
    width: 690rpx;
    margin-top: 20rpx;
    font-size: 30rpx;
    line-height: 36rpx;
}

.content-box-time {
    color: #c1c1c1;
    font-size: 24rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx dashed #c1c1c1;
    display: flex;
    align-items: center;
}

.content-box-time-img {
    width: 150rpx;
    height: 150rpx;
    background-color: #eaeaea;
    border-radius: 10rpx;
    margin-right: 20rpx;
}

.content-curAvatar {
    width: 100rpx;
    height: 100rpx;
    background-color: #eaeaea;
    margin-right: 25rpx;
    border-radius: 10rpx;
}

.progress-container {
    width: 80%;
    height: 20rpx;
    background-color: #eaeaea;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;

}



.price-container {
    display: flex;
    flex-direction: column;
    margin-top: 100rpx;
    width: 750rpx;
    align-items: center;
}

.price-container>view {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 690rpx;
}

.price-container>view:nth-child(n+2) {
    margin-top: 15rpx
}

.price-container>view>image {
    width: 50rpx;
    height: 50rpx;
    border-radius: 10rpx
}

.price-container>view>view {
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;
}

.button-container {
    display: flex;
    /* 使用flex布局使按钮并排 */
    justify-content: space-between;
    margin-top: 50rpx;
    /* 分布按钮之间的空间 */
}

.button-container button {
    width: 320rpx;
    margin: 0;
    /* 移除默认的边距 */
    padding: 0 10rpx;
    outline: none;
    border-radius: 10rpx;

    /* 设置按钮的内边距 */

}

.button-container button:nth-child(1) {
    background-color: #008CBA;
    color: #fff;
}

.button-container button::after {
    display: none;
}

.button-container button:nth-child(2) {
    margin-left: 50rpx;
    background-color: green;
    color: #fff;
}

.collapse-box2 {
    padding: 10rpx 20rpx;
    line-height: 180%;
}

.user-info {
    width: 80%;
    display: flex;
    justify-content: space-between;
}

.user-info-box {
    display: flex;
    align-items: center;
    padding: 5rpx 0;
}

.user-info-img {
    width: 70rpx;
    height: 70rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
    background-color: #c1c1c1;
}
.user-info-name text-chaochu {
    width: 100px;
}

.zan-list {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zan-list-box {
    flex-grow: 1;
    margin-right: 15rpx;
}


.text-chaochu {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.city-name {
    margin-right: 20rpx;
}
</style>